<template>
  <div class="container" id="chapter-management">
    <table-filter>
      <el-select
        placeholder="请选择科目"
        clearable
        v-model="apiSetting.data.subid"
      >
        <el-option
          v-for="item in subjects"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        placeholder="请输入章节名称"
        clearable
        v-model="apiSetting.data.chaptername"
      />
      <SelectCity
          v-if="this.userid == 2007"
          @proClick="proClick"
          @cityClick="cityClick"
          :Province="apiSetting.data.provinceId"
          :cityCode="apiSetting.data.cityId"
        ></SelectCity>
      <el-button @click="search" plain type="warning">查询</el-button>
    </table-filter>
    <el-row>
      <el-button plain type="primary" @click="showEaDialog = true"
        >添加章节</el-button
      >
    </el-row>
    <data-table
      ref="dtb"
      :sort-column="sortColumn"
      :api-setting="apiSetting"
      pagination
    >
      <el-table-column
        fixed
        label="排序"
        width="50"
        prop="sort"
        show-overflow-tooltip
        />
        <!--fixed
        <template slot-scope="{ row }">
          <el-input
              size="small"
              placeholder="请输入排序"
              v-model="row.sort"
              @change="updateSort1($event,row.chapterid)"
          >
          </el-input>
        </template>
      </el-table-column>-->
      <el-table-column
        prop="subname"
        label="科目名称"
        width="300"
        show-overflow-tooltip
      />
      <el-table-column
        prop="chaptername"
        label="章节名称"
        width="300"
        show-overflow-tooltip
      />
			<el-table-column
			  prop="province"
			  label="省"
			  width="100"
			  show-overflow-tooltip
			/>
			<el-table-column
			  prop="city"
			  label="市"
			  width="100"
			  show-overflow-tooltip
			/>
      <el-table-column
        prop="description"
        label="描述"
        width="440"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createtime"
        label="创建时间"
        width="170"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.createtime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column prop="usercode" label="创建人" width="100" />
      <el-table-column label="操作" width="100">
        <template slot-scope="{ row }">
          <el-button
            @click="hasEaPermission(row.usercode, 'edit', row)"
            type="text"
            size="small"
            >编辑
          </el-button>
          <el-button
            @click="
              hasEaPermission(
                row.usercode,
                'delRow',
                `/sys/chapter/deleteChapter/${row.chapterid}`,
                '章节'
              )
            "
            type="text"
            class="danger"
            size="small"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </data-table>
    <ea-chapter
      ref="eaDialog"
      :subjects="subjects"
      :show.sync="showEaDialog"
			:dialogvisible="showEaDialog"
      @on-reload="dtb.loadData()"
    ></ea-chapter>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import dtb from "@/mixins/refs/dtb";
import eaDialog from "@/mixins/refs/eaDialog";
import deleteRow from "@/mixins/dataTable/deleteRow";
import EaChapter from "./EaChapter";
import tbSearch from "@/mixins/dataTable/tbSearch";
import permission from "@/mixins/permission/permission";
import SelectCity from "@/views/component/selectCity";

export default {
  name: "index",
  components: { EaChapter , SelectCity},
  mixins: [permission, tbSearch, dtb, eaDialog, deleteRow],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/chapter/getChapterList",
        data: {
          subid: "",
          chaptername: "",
          orderType: 1,
          provinceId: "", //省份ID
          cityId: "" //市ID
        }
      },
      sortColumn: ["sort","createtime", "createperson"],
      subjects: [],
      cityChose:[],
      userid:''
    };
  },
  created() {
    this.api.getSubjects.apply(this);
    this.getLoginUser()
  },
  computed: {
    ...mapGetters(["getUserType", "getUserAccount"])
  },
  methods: {
    //获取当前用户信息
    getLoginUser(){
      this.axios.get(`/sys/user/getLoginUser`,{})
      .then(res => {
        this.userid = res.userid
      })
    },
    proClick(e) {
      //从城市组件接收到的数据
      this.apiSetting.data.provinceId = e;
    },
    cityClick(e) {
      //从城市组件接收到的数据
      this.apiSetting.data.cityId = e;
    },
    edit(row) {
      this.axios
        .get(`/sys/chapter/getChapterDetail/${row.chapterid}`)
        .then(res => {
          this.showEaDialog = true;
          this.$nextTick(() => {
            this.eaDialog.$data.type = "edit";
            this.eaDialog.$data.singleData = res;

          });
        });
    },
    updateSort1(order,chapterid) {
      this.axios({
        method: "post",
        url: "/sys/subject/sort",
        data: {
          sort: parseInt(order),
          chapterid: chapterid
        }
      }).then(
          location.reload()
      );
    }
  }
};
</script>

<style scoped>
.proSelect {
    width: auto;
  }
</style>
